<template>
  <div id="left-container">
    <div class="leftContainer">
      <!-- <dv-border-box-10> -->
      <div class="leftContainer_top">
        <div class="borderBg">
          <div class="title">
            多跨场景一本账项目各区县数量
          </div>
          <div class="title_body">
            <VEcharts
              ref="chartClass"
              autoresize
              :options="topConfig"
              class="chartClass"
              style="width:100%;height:100%"
            />
          </div>
        </div>

      </div>
      <div class="leftContainer_second">
        <div class="leftContainer_top_title">
          <div class="borderBg">
            <div class="title">
              最佳应用项目各区县数量
            </div>
            <div class="title_body">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="topConfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
        </div>
        <div class="leftContainer_second_body" />
      </div>
      <div class="leftContainer_second">
        <div class="leftContainer_top_title">
          <div class="borderBg">
            <div class="title">
              上线应用项目各区县数量
            </div>
            <div class="title_body">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="topConfig1"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
        </div>
        <div class="leftContainer_second_body">
          <div style="height:calc(21vh)">
            <table>
              <tr>
                <td :colspan="3" style="padding:0px;background: black;height:30px">
                  <div style="display:flex;">
                    <div style="flex:2;text-align:left;padding-left:10px">
                      <span class="circle" />
                      <span style="color:#23b6cd;">
                        改革门户
                      </span>
                    </div>
                    <div style="flex:1;text-align:right;padding-right:10px">
                      <img style="width:25px" src="../../../assets/images/mapTest1/middleBg2.svg">
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td :colspan="3" :rowspan="2" style="padding:5px">
                  <div>
                    <img style="height: calc(8vh);width:88%" src="../../../assets/images/mapTest1/rightBg.png">
                    <img style="height: calc(8vh);width:88%;margin-top:12px" src="../../../assets/images/mapTest1/rightBg1.png">
                  </div>
                </td>

              </tr>

            </table>
          </div>

        </div>
      </div>
      <!-- </dv-border-box-10> -->

    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import * as echarts from 'echarts';
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function(ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - 9, shape.y - 9];
    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
  }
});
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function(ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
    const c4 = [shape.x + 18, shape.y - 9];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  }
});
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function(ctx, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + 18, shape.y - 9];
    const c3 = [shape.x + 9, shape.y - 18];
    const c4 = [shape.x - 9, shape.y - 9];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  }
});
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
// const MAX = [6, 6, 5, 8, 7, 3];
// const VALUE = [2, 1, 3, 2, 1, 1];
var category = [{
  name: '越城区',
  value: 99
},
{
  name: '柯桥区',
  value: 60
},
{
  name: '上虞区',
  value: 23
},
{
  name: '诸暨市',
  value: 60
},
{
  name: '嵊州市',
  value: 30
},
{
  name: '新昌县',
  value: 12
}

]; // 类别
var total = 100; // 数据总数
var datas = [];
category.forEach(value => {
  datas.push(value.value);
});
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      topConfig: {
        xAxis: {
          max: total,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 50,
          top: 10, // 设置条形图的边距
          right: 80,
          bottom: 10
        },
        yAxis: [{
          type: 'category',
          inverse: false,
          data: category,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        series: [{
          // 内
          type: 'bar',
          barWidth: 15,
          legendHoverLink: false,
          barGap: '40%', /* 多个并排柱子设置柱子之间的间距*/
          barCategoryGap: '20%', /* 多个并排柱子设置柱子之间的间距*/
          silent: true,
          itemStyle: {
            normal: {
              color: function(params) {
                var color;
                if (params.dataIndex === 19) {
                  color = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#2485F5' // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: '#53D795' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F63558' // 100% 处的颜色
                    }
                    ]
                  };
                } else if (params.dataIndex === 18) {
                  color = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#2485F5' // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: '#53D795' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F63558' // 100% 处的颜色
                    }
                    ]
                  };
                } else if (params.dataIndex === 17) {
                  color = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#2485F5' // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: '#53D795' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F63558' // 100% 处的颜色
                    }
                    ]
                  };
                } else {
                  color = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#2284f5' // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: '#25d4fd' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#36e1dc' // 100% 处的颜色
                    }
                    ]
                  };
                }
                return color;
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: 'left',
              formatter: '{b}',
              textStyle: {
                color: '#fff',
                fontSize: 10
              }
            }
          },
          data: category,
          z: 1,
          animationEasing: 'elasticOut'
        },
        {
          // 分隔
          type: 'pictorialBar',
          itemStyle: {
            normal: {
              color: '#000'
            }
          },
          symbolRepeat: 'fixed',
          symbolMargin: 3,
          symbol: 'rect',
          symbolClip: true,
          symbolSize: [1, 21],
          symbolPosition: 'start',
          symbolOffset: [2, -1],
          symbolBoundingData: this.total,
          data: category,
          z: 2,
          animationEasing: 'elasticOut'
        },
        {
          // 外边框
          type: 'pictorialBar',
          symbol: 'rect',
          symbolBoundingData: total,
          itemStyle: {
            normal: {
              color: 'none'
            }
          },
          label: {
            normal: {
              formatter: (params) => {
                var text;
                // if (params.dataIndex === 1) {
                //   text = '{a|  100%}{f|  ' + params.data + '}';
                // } else if (params.dataIndex === 2) {
                //   text = '{b|  100%}{f|  ' + params.data + '}';
                // } else if (params.dataIndex === 3) {
                //   text = '{c|  100%}{f|  ' + params.data + '}';
                // } else {
                //   text = '{d|  100%}{f|  ' + params.data + '}';
                // }
                text = '{f|  ' + params.data + '}';
                return text;
              },
              rich: {
                a: {
                  color: 'red'
                },
                b: {
                  color: 'blue'
                },
                c: {
                  color: 'yellow'
                },
                d: {
                  color: 'green'
                },
                f: {
                  color: '#ffffff'
                }
              },
              position: 'right',
              distance: 10, // 向右偏移位置
              show: true
            }
          },
          data: datas,
          z: 0,
          animationEasing: 'elasticOut'
        },
        {
          name: '外框',
          type: 'bar',
          barGap: '-120%', // 设置外框粗细
          data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
          barWidth: 25,
          itemStyle: {
            normal: {
              color: 'transparent', // 填充色
              // barBorderColor: '#1C4B8E', // 边框色
              barBorderWidth: 1, // 边框宽度
              // barBorderRadius: 0, //圆角半径
              label: {
                // 标签显示位置
                show: false,
                position: 'top' // insideTop 或者横向的 insideLeft
              }
            }
          },
          z: 0
        }
        ]

      },
      topConfig1: {
        title: {
          text: '',
          top: 0,
          left: 18,
          textStyle: {
            color: '#00F6FF',
            fontSize: 12
          }
        },
        grid: {
          left: 20,
          right: 40,
          top: 10,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['越城区', '柯桥区', '上虞区', '诸暨市', '嵊州市', '新昌县'],
          axisLabel: {
            fontSize: 10,
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20, // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
            color: '#157082' // 刻度线标签颜色
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 16,
          axisLabel: {
            color: '#157082' // 刻度线标签颜色
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#157082'
            }
          }

        },
        series: [{
          data: [16, 12, 14, 15, 20, 20],
          type: 'bar',
          barWidth: 20, // 柱图宽度
          itemStyle: {
            color: '#0d2f3cbf', // 线的颜色
            borderColor: '#157082'

          }

        }]

        // title: {
        //   text: '',
        //   top: 0,
        //   left: 18,
        //   textStyle: {
        //     color: '#00F6FF',
        //     fontSize: 12
        //   }
        // },
        // grid: {
        //   left: 20,
        //   right: 40,
        //   top: 30,
        //   bottom: -5,
        //   containLabel: true
        // },
        // xAxis: {
        //   type: 'category',
        //   data: ['越城区', '柯桥区', '上虞区', '诸暨市', '嵊州市', '新昌县'],
        //   axisLine: {
        //     show: true,
        //     lineStyle: {
        //       color: '#fff'
        //     }
        //   },
        //   offset: -15,
        //   axisTick: {
        //     show: false,
        //     length: 9,
        //     alignWithLabel: true,
        //     lineStyle: {
        //       color: '#7DFFFD'
        //     }
        //   },
        //   axisLabel: {
        //     fontSize: 10,
        //     interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
        //     rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
        //   }
        // },
        // yAxis: {
        //   type: 'value',
        //   axisLine: {
        //     show: true,
        //     lineStyle: {
        //       color: 'white'
        //     }
        //   },
        //   splitLine: {
        //     show: false
        //   },
        //   axisTick: {
        //     show: false
        //   },
        //   axisLabel: {
        //     fontSize: 16
        //   },
        //   boundaryGap: ['20%', '20%']
        // },
        // series: [{
        //   type: 'custom',
        //   renderItem: function(params, api) {
        //     const location = api.coord([api.value(0), api.value(1)]);
        //     return {
        //       type: 'group',
        //       children: [{
        //         type: 'CubeLeft',
        //         shape: {
        //           api,
        //           xValue: api.value(0),
        //           yValue: api.value(1),
        //           x: location[0],
        //           y: location[1],
        //           xAxisPoint: api.coord([api.value(0), 0])
        //         },
        //         style: {
        //           fill: 'rgba(47,102,192,.27)'
        //         }
        //       }, {
        //         type: 'CubeRight',
        //         shape: {
        //           api,
        //           xValue: api.value(0),
        //           yValue: api.value(1),
        //           x: location[0],
        //           y: location[1],
        //           xAxisPoint: api.coord([api.value(0), 0])
        //         },
        //         style: {
        //           fill: 'rgba(59,128,226,.27)'
        //         }
        //       }, {
        //         type: 'CubeTop',
        //         shape: {
        //           api,
        //           xValue: api.value(0),
        //           yValue: api.value(1),
        //           x: location[0],
        //           y: location[1],
        //           xAxisPoint: api.coord([api.value(0), 0])
        //         },
        //         style: {
        //           fill: 'rgba(72,156,221,.27)'
        //         }
        //       }]
        //     };
        //   },
        //   data: MAX
        // }, {
        //   type: 'custom',
        //   renderItem: (params, api) => {
        //     const location = api.coord([api.value(0), api.value(1)]);
        //     return {
        //       type: 'group',
        //       children: [{
        //         type: 'CubeLeft',
        //         shape: {
        //           api,
        //           xValue: api.value(0),
        //           yValue: api.value(1),
        //           x: location[0],
        //           y: location[1],
        //           xAxisPoint: api.coord([api.value(0), 0])
        //         },
        //         style: {
        //           fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //             offset: 0,
        //             color: '#3B80E2'
        //           },
        //           {
        //             offset: 1,
        //             color: '#49BEE5'
        //           }
        //           ])
        //         }
        //       }, {
        //         type: 'CubeRight',
        //         shape: {
        //           api,
        //           xValue: api.value(0),
        //           yValue: api.value(1),
        //           x: location[0],
        //           y: location[1],
        //           xAxisPoint: api.coord([api.value(0), 0])
        //         },
        //         style: {
        //           fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //             offset: 0,
        //             color: '#3B80E2'
        //           },
        //           {
        //             offset: 1,
        //             color: '#49BEE5'
        //           }
        //           ])
        //         }
        //       }, {
        //         type: 'CubeTop',
        //         shape: {
        //           api,
        //           xValue: api.value(0),
        //           yValue: api.value(1),
        //           x: location[0],
        //           y: location[1],
        //           xAxisPoint: api.coord([api.value(0), 0])
        //         },
        //         style: {
        //           fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //             offset: 0,
        //             color: '#3B80E2'
        //           },
        //           {
        //             offset: 1,
        //             color: '#49BEE5'
        //           }
        //           ])
        //         }
        //       }]
        //     };
        //   },
        //   data: VALUE
        // }, {
        //   type: 'bar',
        //   label: {
        //     normal: {
        //       show: true,
        //       position: 'top',

        //       fontSize: 16,
        //       color: '#fff',
        //       offset: [4, -25]
        //     }
        //   },
        //   itemStyle: {
        //     color: 'transparent'
        //   },
        //   data: MAX
        // }]
      }

    };
  },
  computed: {
  },
  created() {

  },
  mounted() {

  },
  methods: {

  }
};
</script>
<style lang='scss' scoped>
   .leftContainer{
    height: calc(100vh - 90px);
    border-radius: 10px;
   }

   .title{
     height: 33px;
     padding-top: 10px;
     font-size: 12px;
     padding-left: 8px;
     background: url('../../../assets/images/mapTest1/borderBg.svg') no-repeat;
     background-size:100% 100%;
     font-weight: bolder;
     color: #ced1da;
   }
   .title_body{
     height:calc(17vh);
     border: 2px solid #0c284f;
     border-top:none;
     border-bottom-right-radius:5px;
     border-bottom-left-radius:5px;
   }

   .leftContainer_top_title{
     font-size: 17px;
     font-weight: bolder;
   }
  .leftContainer /deep/ .dv-border-box-10 .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  .leftContainer_second{
    margin-top: 10px
  }
  .leftContainer_top_body_div{
    flex:1;
    text-align:center;
    border-right: 1px solid #ffffff94;
    height: 100%;

  }
   .leftContainer_top_body_div1{
     flex:1;
     text-align:center;
     height: 100%;

  }
  .num{
    font-size: 24px;
    font-weight: bolder;
  }
  .name{
    font-size: 8px;
    color: gray
  }
  .leftContainer_second_body{
    margin-top: 8px
  }

 td {
      border: 1px solid #22c0d6;

      text-align: center;
      height: 48px;
      line-height: 18px;
      padding: 10px;
      width: 20000000px;
      color: #ced1da;
      font-weight: bolder;
      font-size:15px;
      font-weight: bolder
    }

    table {
        border-collapse: collapse;
    }
    .circle{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border:1px solid #23b6cd;
    border-radius: 50%;
  }
</style>
